<template>
  <div>
    <div class="title">
      <h2>实验室运行记录表</h2>
    </div>
    <div>请选择时间：</div>
    <el-time-picker
      arrow-control
      v-model="value1"
      style="padding: 3px; margin: 0 auto"
      placeholder="任意时间点"
    >
    </el-time-picker>
    
    <el-button
      style="float: right; margin: 0 auto"
      type="primary"
      @click="dialogTableVisible = true"
      round>
      添 加
    </el-button>

    <el-table
      style="width: 100%; margin: 0 auto"
      :data="tableVisible"
      ref="tableVisible"
    >
      <el-table-column label="序号" prop="laboratory_id"> </el-table-column>
      <el-table-column label="周次" prop="week"> </el-table-column>
      <el-table-column label="时间" prop="time"> </el-table-column>
      <el-table-column label="专业班级（综合型）" prop="class_id" width="150">
      </el-table-column>
      <el-table-column label="学生姓名" prop="number"> </el-table-column>
      <el-table-column label="人数" prop="class_name"> </el-table-column>
      <el-table-column
        label="课程名称（实验项目）"
        prop="class_type"
        width="160"
      >
      </el-table-column>
      <el-table-column label="课程类型" prop="teacher"> </el-table-column>
      <el-table-column label="任课教师" prop="situation" width="100">
      </el-table-column>
      <el-table-column label="设备运行情况" prop="situation" width="110">
      </el-table-column>
      <el-table-column label="备注" prop="remark"> </el-table-column>
      <el-table-column width="150">>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click=" dialogTableVisibleDele= true"
            type="primary"
          >
            修 改
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="delData(scope.row)"
            >删 除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-button
      type="primary"
      round
      style="display: block; margin: 0 auto"
      @click="resetForm()"
      >提 交</el-button>
    <!-- 添加对话框 -->
      <el-dialog
        title="信息填写"
        :visible.sync="dialogTableVisible"
        style="text-align: center;height:800px"
        >
        <el-form ref="tableAddFef" :model="tableAdd">
          <el-form-item label="序号" label-width="100px">
            <el-input v-model="tableAdd.laboratory_id"></el-input>
          </el-form-item>
          <el-form-item label="周次" label-width="100px">
            <el-input v-model="tableAdd.week"></el-input>
          </el-form-item>
          <el-form-item label="时间" label-width="100px">
            <el-input v-model="tableAdd.time"></el-input>
          </el-form-item>
          <el-form-item label="专业班级" label-width="100px">
            <el-input
              v-model="tableAdd.class_id" label-width="100px"></el-input>
          </el-form-item>
          <el-form-item label="人数" label-width="100px">
            <el-input
              v-model="tableAdd.number"></el-input>
          </el-form-item>
          <el-form-item label="学生姓名" label-width="100px">
            <el-input
              v-model="tableAdd.input" label-width="100px"></el-input>
          </el-form-item>
          <el-form-item label="课程类型" label-width="100px">
            <el-input
              v-model="tableAdd.class_type"></el-input>
          </el-form-item>
          <el-form-item label="任课教师" label-width="100px">
            <el-input
              v-model="tableAdd.teacher"></el-input>
          </el-form-item>
          <el-form-item label="课程名称、实验项目" label-width="150px">
            <el-input
              v-model="tableAdd.class_name"></el-input>
          </el-form-item>
          <el-form-item label="设备运行情况" label-width="100px">
            <el-input
              v-model="tableAdd.situation"></el-input>
          </el-form-item>
          <el-form-item label="备注" label-width="100px">
            <el-input
              v-model="tableAdd.remark"></el-input>
          </el-form-item>
          <el-button
            @click="addsuccess()"
            type="primary"
            style="display: block; margin: 0 auto"
            >确 认</el-button>
        </el-form>
      </el-dialog>
 <!-- 修改对话框 -->
      <el-dialog
        title="信息填写"
        :visible.sync="dialogTableVisibleDele"
        style="text-align: center;height:800px"
        >
        <el-form ref="dialogTableVisibleDeleRef" :model="tableDele">
          <el-form-item label="序号" label-width="100px">
            <el-input v-model="tableDele.laboratory_id"></el-input>
          </el-form-item>
          <el-form-item label="周次" label-width="100px">
            <el-input v-model="tableDele.week"></el-input>
          </el-form-item>
          <el-form-item label="时间" label-width="100px">
            <el-input v-model="tableDele.time"></el-input>
          </el-form-item>
          <el-form-item label="专业班级" label-width="100px">
            <el-input
              v-model="tableDele.class_id" label-width="100px"></el-input>
          </el-form-item>
          <el-form-item label="人数" label-width="100px">
            <el-input
              v-model="tableDele.number"></el-input>
          </el-form-item>
          <el-form-item label="学生姓名" label-width="100px">
            <el-input
              v-model="tableDele.input" label-width="100px"></el-input>
          </el-form-item>
          <el-form-item label="课程类型" label-width="100px">
            <el-input
              v-model="tableDele.class_type"></el-input>
          </el-form-item>
          <el-form-item label="任课教师" label-width="100px">
            <el-input
              v-model="tableDele.teacher"></el-input>
          </el-form-item>
          <el-form-item label="课程名称、实验项目" label-width="150px">
            <el-input
              v-model="tableDele.class_name"></el-input>
          </el-form-item>
          <el-form-item label="设备运行情况" label-width="100px">
            <el-input
              v-model="tableDele.situation"></el-input>
          </el-form-item>
          <el-form-item label="备注" label-width="100px">
            <el-input
              v-model="tableDele.remark"></el-input>
          </el-form-item>
          <el-button
            @click="Delesuccess()"
            type="primary"
            style="display: block; margin: 0 auto"
            >确 认</el-button>
        </el-form>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: new Date(),
      dialogTableVisible: false,
      dialogTableVisibleDele:false,
      dialog: false,
      loading: false,
      textarea: "",
      input: "",
      add: "",
      tableAdd: {
        laboratory_id: "",
        week: "",
        time: "",
        class_id: "",
        number: "",
        class_name: "",
        class_type: "",
        teacher: "",
        situation: "",
        remark: "",
      },
      tableDele:{
 laboratory_id: "",
        week: "",
        time: "",
        class_id: "",
        number: "",
        class_name: "",
        class_type: "",
        teacher: "",
        situation: "",
        remark: "",
      },
      tableAdds: {
        laboratory_id: "",
        week: "",
        time: "",
        class_id: "",
        number: "",
        class_name: "",
        class_type: "",
        teacher: "",
        situation: "",
        remark: "",
      },
      tableVisible: [],
    };
  },
  methods: {
    async addsuccess() {
      const { data: res } = await this.$http.post(
        "/api/student/addlabrun",
        this.tableAdd
      );
      console.log(res.data);
      if (res.code == 200) {
        // console.log(res.data.form_id);
        this.$message.success("成功！");
        sessionStorage.setItem("formid", res.data.form_id);
        const form_id = sessionStorage.getItem("formid");
        // console.log(form_id);
        this.dialogTableVisible = false;
        this.tableVisible.push(res.data.$res);
        // console.log(this.tableAdd);
      this.tableAdd.laboratory_id='';
      this.tableAdd.week='';
      this.tableAdd.time='';
      this.tableAdd.class_id='';
      this.tableAdd.number='';
      this.tableAdd.input='';
      this.tableAdd.class_name='';
      this.tableAdd.class_type='';
      this.tableAdd.teacher='';
      this.tableAdd.situation='';
      this.tableAdd.remark='';
      } else if (res.code == 100) {
        this.$message.error("添加失败！请重新添加！");
      }
    },
    async Delesuccess() {
      const form_id=sessionStorage.getItem('formid')
      const { data: res } = await this.$http.post(
        "/api/student/updatelabrun",{form_id:form_id,laboratory_id:this.laboratory_id}
      );
      console.log(res);
      if (res.code == 200) {
        this.$message.success("成功！");
      } else if (res.code == 100) {
        this.$message.error("修改失败！请重新修改！");
      }
    },
    created() {
      this.getlist();
    },
    // async deletesuccess(){
    //   console.log(this.tableVisible);
    //   const form_id=sessionStorage.getItem('formid');
    //   console.log(form_id);
    //   const {data: res}=await this.$http.post(
    //     '/api/student/deletelabrun',{
    //         form_id:form_id
    //       })
    //     // console.log(res)
    //     if(res.code==100) return this.$message.error("设备添加失败！请重新添加！")
    //     this.$message.success("成功！")
    //       // console.log(typeof(this.equipmentadd));
    //     this.$router.go(0)
    // },
    async getlist() {
      const { data: res } = await this.$http.get(
        "/api/student/selectlabloan?form_id",
        {
          form_id: form_id,
        }
      );
      // console.log(res);
      this.tableAdd = res.data;
    },
    delData() {
      this.tableVisible.splice(this.tableVisible.indexOf(), 1)
    },
    // addDialogClosed(){
    //   this.$refs.tableAddFef.resetFields()
    // },
    resetForm() {
      this.$message.success("提交成功！");
      this.$router.go(0);
    },
  },
};
</script>

<style>
.title {
  text-align: center;
  margin: 3%;
}
</style>